<template>
<div class="wrap">
	<h3>最近浏览</h3>
	<div class="browse">
		<div class="fruit" v-for="(item,index) in fruitarr">
			<img :src="item.src"/>
			<span class="remove" @click="del(index)">×</span>
			<dl>
				<dt>{{item.name}}</dt>
				<dd>{{item.character}}</dd>
				<dd><span class="nowprice">¥ {{item.nowprice}}</span><i class="oldprice">¥{{item.oldprice}}</i><em @click="go"></em></dd>
			</dl>
		</div>		
	</div>
</div>
</template>

<script>
	export default{
		name:"recentbrowse",
		data(){
			return{
				fruitarr:[{src:require("../../assets/image/plum.png"),name:"新西兰佳沛黄金奇异果",character:"果肉绵密、花蜜般的甘甜百吃不厌",nowprice:28.80,oldprice:"40.00"},{src:require("../../assets/image/plum.png"),name:"新西兰佳沛黄金奇异果",character:"果肉绵密、花蜜般的甘甜百吃不厌",nowprice:28.80,oldprice:"40.00"},{src:require("../../assets/image/plum.png"),name:"新西兰佳沛黄金奇异果",character:"果肉绵密、花蜜般的甘甜百吃不厌",nowprice:28.80,oldprice:"40.00"},{src:require("../../assets/image/plum.png"),name:"新西兰佳沛黄金奇异果",character:"果肉绵密、花蜜般的甘甜百吃不厌",nowprice:28.80,oldprice:"40.00"},{src:require("../../assets/image/plum.png"),name:"新西兰佳沛黄金奇异果",character:"果肉绵密、花蜜般的甘甜百吃不厌",nowprice:28.80,oldprice:"40.00"},{src:require("../../assets/image/plum.png"),name:"新西兰佳沛黄金奇异果",character:"果肉绵密、花蜜般的甘甜百吃不厌",nowprice:28.80,oldprice:"40.00"},]
			}
		},
		methods:{
			del:function(index){
				this.fruitarr.splice(index,1)
			},
			go:function(){
				window.location.href = "#/myshopCar"
			}
			
		}
	}
</script>

<style scoped>
.wrap{
	width: 1085px;
	min-height: 623px;
	border: 1px solid rgb(242,242,242);	
}
h3{
	font-weight: 400;
	font-size: 18px;
	color: rgb(60,60,60);
	text-indent: 22px;
	line-height: 58px;
	border-bottom: 1px solid rgb(242,242,242);	
}
.browse{
	margin: 23px 32px 0;
	width: 1021px;
	display: flex;
	justify-content:space-between;
	flex-wrap:wrap;
}
.fruit{
	display: inline-block;
	width: 302px;
	height: 432px;
	border: 1px solid rgb(242,242,242);
	margin-bottom:36px ;
}
.remove{
	display: inline-block;
	background-color: rgb(62,148,68);
	color: white;
	width: 30px;
	height: 30px;
	text-align: center;
	vertical-align: 227px;
	border-radius: 50%;
	font-size: 20px;
	font-weight: 700;
}
img{
	width: 260px;
	height: 254px;
}
dl{
	margin: 48px 0 0 21px;
}
dt{
	font-size: 18px;
	color: rgb(135,135,135);
	margin-bottom: 5px;
}
dd{
	margin-left: 0;
	font-size: 14px;
	color: rgb(182,182,182);
	line-height: 36px;
}
.nowprice{
	font-size:20px ;
	color: rgb(255,143,145);
}
.oldprice{
	font-style: normal;
	padding-left: 20px;
	font-size:16px ;
	text-decoration: line-through;
}
em{
	display: inline-block;
	vertical-align: text-bottom;
	width:34px ;
	height:30px ;
	background: url(../../assets/image/cat_01.png) no-repeat;
	background-size: 100% 100%;
	margin-left: 94px;
}
</style>